<%@page import="java.util.Set"%>
<%@page import="com.moefor.clover.model.User"%>
<%@page import="com.moefor.clover.model.Message"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="res/css/messenger.css" rel="stylesheet">
<link href="res/css/messenger-theme-block.css" rel="stylesheet">
<title>Clover</title>

<link href="res/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
	padding-bottom: 30px;
	background: url(res/img/background.gif) repeat 0 0;
}
/***********************nva****************************/
.nav-item:hover {
	background-color: #F0F0F0 !important;
}

.glyphicon {
	top: 3px;
}

.open .dropdown-toggle {
	background: #FFF !important;
}

.dropdown-menu {
	border: 0px;
	margin-top: -1px !important;
}

.dropdown-menu a {
	text-align: center;
}

.control {
	padding: 3px 0px;
	text-align: center;
}

.control a {
	display: inline-block !important;
	width: 60px;
	padding: 0px !important;
	color: #888 !important;
}

#msgs .dropdown-header {
	text-align: center;
	color: #222;
	font-size: 16px;
	font-weight: bold;
}

.msg-item {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

.msg-item span {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block !important;
	padding: 0 5px !important;
}

#user-icon a {
	padding: 3px 0 !important;
}

#user-icon a:hover {
	background-color: #FFF;
}
/***********************nva****************************/
/***********************search-box****************************/
.search-box {
	width: 100%;
	height: 100%;
}

.search-box select {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-progress-appearance: none;
	border: solid 3px #FB9000;
	border-right: 0;
	width: 80px;
	height: 100%;
	float: left;
	outline: none;
	background-color: #F5F5F5;
	color: #777;
	padding: 0 10px;
	background-image: url(res/img/down-tag.png);
	background-repeat: no-repeat;
	background-position: right;
}

.search-box select option {
	background-color: #FFF;
}

.search-box input[type="text"] {
	border: solid 3px #FB9000;
	width: calc();
	width: -moz-calc(100% -180px);
	width: -webkit-calc(100% - 180px);
	height: 100%;
	outline: none;
	padding: 0px 5px;
	float: left;
	border-right: 0;
	border-left: 0;
}

.search-box input[type="submit"] {
	width: 100px;
	height: 100%;
	border: 0;
	background-color: #FB9000;
	padding: 0;
	float: left;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	outline: none;
}

.search-box input[type="submit"]:hover {
	background-color: #FDAC3F;
}
/***********************search-box****************************/

/***********************footer****************************/
footer {
	border-top: solid 3px #FB9000;
	padding-top: 20px;
	margin: 40px 0;
}

footer hr {
	margin: 10px 0;
}

footer a {
	color: #777;
	text-decoration: none;
	padding: 0 2px;
}

footer a:hover {
	color: #FB9000;
	text-decoration: none;
}

footer a:link {
	text-decoration: none;
}

footer a:visited {
	color: #777;
}

footer .copyright {
	color: #AAA;
}
/***********************footer****************************/

/***********************goods-list****************************/
@media screen and (max-width: 991px) {
	#goods-page {
		padding-left: 0px;
		padding-right: 0px;
	}
}

.good-box {
	padding: 10px 15px;
}

.good-item {
	height: 144px;
	background-color: #FFF;
	padding: 10px;
	box-shadow: 0 0 5px #ccc;
}

.good-info {
	height: 100%;
	width: calc(100% - 165px);
	width: -moz-calc(100% - 165px);
	width: -webkit-calc(100% - 165px);
	float: left;
}

.seller-info {
	height: 100%;
	border-left: 1px solid #F8F6E4;
	width: 165px;
	float: left;
	background-color: #FFFEF8;
	padding-left: 10px;
}

.good-pic-box {
	height: 100%;
	width: 124px;
	float: left;
}

.good-pic {
	width: 100%;
	height: 100%;
	display: inline-block;
}

.good-des-box {
	height: 100%;
	width: calc(100% - 124px);
	width: -moz-calc(100% - 124px);
	width: -webkit-calc(100% - 124px);
	padding-left: 15px;
	padding-right: 20px;
	float: left;
}

.good-name {
	color: #222;
	display: inline-block;
	max-width: 80%;
	padding-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.good-name:hover {
	color: #222;
}

.good-name:visited {
	color: #222;
}

.good-name:link {
	color: #222;
	text-decoration: none;
}

.good-market {
	color: #222;
	display: inline-block;
	padding-bottom: 8px;
	margin-left: 10px;
	max-width: 55%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.good-market:hover {
	color: #222;
}

.good-market:visited {
	color: #222;
}

.good-market:link {
	color: #222;
	text-decoration: none;
}

.glyphicon-map-marker {
	top: 1px;
}

.good-des-box b {
	color: #999;
}

.good-des-box em {
	color: #F40;
	font-weight: 700;
	font-size: 14px;
	font-style: normal;
	font-family: Verdana;
}

.good-des-box div {
	height: 40px;
	width: 100%;
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 5px;
}

.publish-time {
	float: left;
	color: #999;
}

.leave-word {
	float: right;
	margin-right: 20px;
}

.A {
	color: #FB9000;
	text-decoration: none;
}

.A:hover {
	color: #FB9000;
	text-decoration: none;
}

.A:link {
	text-decoration: none;
}

.A:visited {
	color: #FB9000;
}

.seller-name {
	overflow: hidden;
	text-overflow: ellipsis;
	width: 60px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: inline-block;
}

.waterfall-loading {
	background: url(res/img/loading.gif) center center no-repeat;
	height: 50px;
	overflow: hidden;
	text-indent: -99999em;
}

.other-good {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding-top: 13px;
}

@media screen and (max-width: 525px) {
	.seller-info {
		display: none;
	}
	.good-info {
		width: 100%;
	}
	.good-des-box {
		padding-right: 0;
	}
}

.page-operation {
	text-align: center;
	visibility: hidden;
	padding-top: 20px;
}

.page-operation button {
	background-color: #FB9000;
	border: 0;
	color: #fff;
	padding: 4px 8px;
	outline: none;
	box-shadow: 0 0 5px #ccc;
	border-radius: 3px;
}
/***********************goods-list****************************/

/***********************paging****************************/
.paging {
	text-align: center;
}

.disable a {
	background-color: #EEE !important;
	color: #23527c !important;
}
/***********************paging****************************/
/***********************broadside****************************/
#broadside {
	position: absolute;
	display: none;
	top: 116px;
	width: 270px;
	transition: 1s;
}

#broadside .list-group-item a {
	width: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	white-space: nowrap;
}

#to-top {
	text-align: center;
	font-size: 16px;
	font-weight: bolder;
	background-color: #EEE;
	color: #FFF;
	visibility: hidden;
	height: 30px;
	line-height: 30px;
	list-style-type: none;
}

#broadside .list-group-item .badge {
	margin-top: 3.5px;
}

@media screen and (max-width: 1200px) {
	#broadside {
		width: 220px;
	}
}

/***********************broadside****************************/
</style>
</head>
<body>

	<nav id="top" class="navbar navbar-default">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<img style="float: left; height: 50px;" src="res/img/logo.png" /> <a
					class="navbar-brand" href="home.page">Clover</a>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<%
                	if(request.getAttribute("user") != null){
                %>
				<ul id="user-nav" class="nav navbar-nav">
					<li class="dropdown"><a href="#"
						class="dropdown-toggle nav-item" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false"><span
							class="glyphicon glyphicon-user" aria-hidden="true"></span>
							${user.username}<span class="caret"></span></a>
						<ul class="dropdown-menu" style="min-width: 130px;" role="menu">
							<li id="user-icon"><a href="userinfo.page"><img
									class="img-circle"
									style="width:120px;height:120px;background:url(${user.avator.url}) no-repeat center;background-size:cover;"
									id="user-icon" /></a></li>
							<li class="control"><a href="userinfo.page">账号管理</a><a
								href="user/signout.do">注销登陆</a></li>
						</ul></li>
					<li class="dropdown"><a href="#"
						class="dropdown-toggle nav-item" data-toggle="dropdown"
						role="button" aria-haspopup="true" aria-expanded="false"><span
							class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
							消息 <span class="caret"></span></a>
						<ul id="msgs" class="dropdown-menu" role="menu">
							<li class="dropdown-header">未读的新消息</li>
							<%					
		     						Object object = request.getAttribute("msgSet");
		     						if(object != null && !((Set<Message>)object).isEmpty()){
		     							for(Message msg : (Set<Message>)object){
			     							out.print("<li role='separator' class='divider'></li>");
			     							out.print("<li class='msg-item'><span style='width:70%;text-align:left'>"+
			     								msg.getContent()+
			     								"</span><span style='width:30%;'>"+
			     								msg.getSender().getUsername()+	
			     								"</span></li>");
			     							out.print("<li role='separator' class='divider'></li>");
			     						}
		     						}else{
		     							out.print("<li role='separator' class='divider'></li>"+
		     										"<li class='msg-item'><span style='width:70%;text-align:left'>"+
			     									"<span>暂时没有新消息</span>"+
			     									"</span></li>"+
			     									"<li role='separator' class='divider'></li>");						
		     						}
		     	
		     						
		     		
		     	%>
							<li><a id='checkAll' href="userinfo.page#comment"
								style="width: 100%; text-align: center;">查看全部</a></li>
						</ul></li>
				</ul>
				<%
                	}else{
               	%>
				<ul id="visitor-nav" class="nav navbar-nav">
					<li><a class="nav-item" href="sign.page#signin"
						style="color: #D70057;">亲，请先登录</a></li>
					<li><a class="nav-item" href="sign.page">免费注册</a></li>
				</ul>
				<%
               		}
               	%>
				<ul class="nav navbar-nav navbar-right">
					<li><a class="nav-item" href="deal.page"><span
							class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
							我的交易</a></li>
					<li><a class="nav-item" href="onsale.page"><span
							class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span>
							我的寄售</a></li>
					<!-- 
                    <li><a class="nav-item" href="favorite.page"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> 我的收藏</a></li>  
                     -->
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>

	<div class="container">
		<div class="row" style="padding: 30px 0;">
			<div class="col-md-6 col-md-offset-4" style="height: 34px;">
				<form class="search-box">
					<select>
						<option value="goods">商品</option>
						<option value="market">Market</option>
					</select> <input type="text" placeholder="Search"> <input
						type="submit" value="搜索">
				</form>
			</div>
		</div>

		<div id="main-container" class="row">
			<div id="goods-page" class="col-md-9">


				<div class="waterfall-loading" style="visibility: visible;">加载中...</div>
				<div class="page-operation">
					<button id="top">
						<span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>返回顶部
					</button>
					<button id="more">
						<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>加载更多
					</button>
				</div>
			</div>
			<div class="col-md-3" style="margin-top: 34px;">
				<nav id="broadside" class="hidden-print hidden-xs hidden-sm ">
					<ul class="list-group">
						<li class="list-group-item"
							style="text-align: center; font-size: 16px; font-weight: bolder; background-color: #FB9000; color: #FFF;">为您推荐的Market</li>
						<li id="to-top"><span class="glyphicon glyphicon-menu-up"
							aria-hidden="true"></span><a href="#">返回顶部</a></li>
					</ul>
				</nav>
			</div>

		</div>

		<footer>
			<div class="link-group">
				<a href="http://www.jmu.edu.cn/">集美大学</a> <a
					href="http://xtw.jmu.edu.cn/">集美大学校团委</a> <a
					href="http://cec.jmu.edu.cn/">集美大学计算机工程学院</a>
			</div>
			<hr>
			<span class="copyright">© 2016 Clover 版权所有</span>
		</footer>

	</div>



	<script src="res/js/jquery.min.js"></script>
	<script src="res/js/bootstrap.min.js"></script>
	<script src="res/js/jquery.cookie.js"></script>
	<script src="res/js/messenger.min.js"></script>
	<script type="text/javascript"
		src="http://api.map.baidu.com/api?v=2.0&ak=dWjn9tbyoFQAxeNTChlqcTPsCwIAIWtW"></script>
	<script type="text/javascript">
   		var goodLoadLock = true;
   		var pagCount = 1;
   		var goods_search_arg = {'keyword':'','page_num':pagCount,'page_size':5,'pointX':$.cookie("lng"),'pointY':$.cookie("lat")};
		var goods_search_url = "common/goods/search.do";
        $(document).ready(function(){

			
        	$._messengerDefaults = {
			    extraClasses: 'messenger-fixed messenger-theme-block messenger-on-bottom messenger-on-right'
			}
        	
        	if($.cookie("lng") == null && $.cookie("lat") == null){
        		locate();
        	}else{
        		init();
        	}
        	


        	
            $("#to-top").children("a").click(function(){
           		$(window).scrollTop(0);
               	return false; 
            });
            
            $(".page-operation #top").click(function(){
            	$(window).scrollTop(0);
            })
            
            $(".page-operation #more").click(function(){
            	if(goodLoadLock){
            		getGood(goods_search_url,goods_search_arg);
            	}
            });
            
            $(window).scroll(function(){
            	moveSideBar($(this));
            	var tmp = $("footer"); 	
            	if(($(this).scrollTop() + $(this).height()-50) > tmp.offset().top && goodLoadLock){
            		if(pagCount < 3){
            			getGood(goods_search_url,goods_search_arg);
            		}else{
            			$(".page-operation").css({
            				'visibility':'visible'
            			});
            		}
            	}
            	
            });
            
            $(".search-box input[type='submit']").click(function(){
            	if($(this).prevAll('select').val() == "goods"){
            		location.href = "home.page#keyword=" + $(this).prevAll("input").val();
            	}else{
            		location.href = "home.page#market=" + $(this).prevAll("input").val();
            	}
            	if(location.href.indexOf('home.page') > 0){
            		location.reload();
            	}
            	return false;
            });
            
            $("#checkAll").click(function(){
            	$.ajax({
            		'async':false,
            		'url':'msg/read_all.do'
            	})
            })
        });
        
/***************************************************/
	
	function init(){
		var hash = location.hash;
		if (hash.indexOf("#market-id")>=0){
			goods_search_url = "common/goods/search_by_market_id.do";
			goods_search_arg = {'market_id':hash.replace("#market-id=",""),'page_num':pagCount,'page_size':5};
		}else if(hash.indexOf("market")>=0){
			goods_search_url = "common/goods/search_by_market.do";
			goods_search_arg = {'keyword':hash.replace("#market=",""),'page_num':pagCount,'page_size':5};
		}else if(hash.indexOf("#keyword")>=0){
			goods_search_arg.keyword = hash.replace("#keyword=","");
		}
		
		getGood(goods_search_url,goods_search_arg);
		getMarkets($.cookie("lng"),$.cookie("lat"));
	}
	
	function locate(){
		var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){ 
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
        		$.cookie("lng",r.point.lng,{ expires: 1 });
        		$.cookie("lat",r.point.lat,{ expires: 1 }); 
        		init();
            }
            else {
                alert('failed'+this.getStatus());
            }        
        });
		//$.cookie("lng",118.10388605,{ expires: 1 });
		//$.cookie("lat",24.48923061,{ expires: 1 });
		goods_search_arg.pointX = $.cookie("lng");
		goods_search_arg.pointY = $.cookie("lat");
		init();
	}
	
	
	function getGood(url,arg){
		goodLoadLock = !goodLoadLock;
		arg.page_num = pagCount;
		var watlod = $(".waterfall-loading");
		watlod.css({
			'visibility':'visible'
		});
		$.ajax({
			type:'POST',
			url:url,
			data:arg,
			dataType:'JSON',
			success:function(data){
				watlod.css({
					'visibility':'hidden'
				});
				if(data.state){
					for(var index in data.data){
						var tmp = (new Date()).getTime() - data.data[index].date;
						var date;
						if((tmp/24/60/60/1000) > 1){
							date = parseInt(tmp/24/60/60/1000) + "天";
						}else if((tmp/60/60/1000) > 1){
							date = parseInt(tmp/60/60/1000) + "小时";
						}else if((tmp/60/1000) > 1){
							date = parseInt(tmp/60/1000) + "分钟";
						}else{
							date = "1分钟";
						}
						watlod.before("<div class='good-box'>"+
					             "<div class='good-item'>"+
							        "<div class='good-info'>"+
							            "<div class='good-pic-box'>"+
							                "<a href='item.page?goodsid=" + data.data[index].id + "' style='background:url(" + data.data[index].picItems[0].url + ") no-repeat center; background-size:cover;' class='good-pic'></a>"+
							            "</div>"+
							            "<div class='good-des-box'>"+
							                "<a class='good-name' href='item.page?goodsid=" + data.data[index].id + "'>" + data.data[index].name + "</a>"+
							                "<p><b>¥ </b><em>" + data.data[index].price + "</em></p>"+
							                "<div>" + data.data[index].introduction + "</div>"+
							                "<p class='publish-time'>" + date + "前</p>"+
							                "<a class='leave-word A' href='item.page?goodsid=" + data.data[index].id + "#comment'>评论" + data.data[index].commentItems.length + "</a>"+
							            "</div>"+
							        "</div>"+                   
							        "<div class='seller-info'>"+
							            "<img class='img-circle' style='width:90px;height:90px;background:url(" + data.data[index].owner.avator.url + ") no-repeat center;background-size:cover;'/>"+
							            "<a href='allsale.page?userid=" + data.data[index].owner.id + "' class='seller-name A'>" + data.data[index].owner.username + "</a>"+
							            "<a href='allsale.page?userid=" + data.data[index].owner.id + "' class='other-good A'>该卖家其它闲置</a>"+
							        "</div>"+ 
							    "</div>"+               
							"</div>");
					}
					pagCount++;
				}else{
					$.globalMessenger().post({
                        'message':data.data,
                        'hideAfter': '1.5',
                        'hideOnNavigate': 'true'
                    });
					
					$(".page-operation").css({
        				'visibility':'visible'
        			});
					goodLoadLock = true;
				}
				goodLoadLock = !goodLoadLock;
			}
		});
		
	}
	
	
	
	function getMarkets(lng,lat){
    		$.ajax({
    			type:'POST',
    			url:"common/market/search_around.do",
    			data:{"pointX":lng,"pointY":lat},
    			dataType:'JSON',
    			success:function(data){
    				
    				if(data.state){
    					$("#broadside").css({
    						'display':'unset'
    					});
    					var bottom = $("#to-top");
    					for(var index in data.data){
    						bottom.before("<li class='list-group-item'><a href='' data-id='" + data.data[index].id + "'>" + data.data[index].name + "</a><span class='badge'>" + '...' + "</span></li>");
    					}
    					
    					$(".list-group-item a").click(function(){
    		            	
    						if(location.href.indexOf('home.page') > 0){
    							location.href = "home.page#market-id="+$(this).data('id');
        		            	location.reload();
    						}else{
    							location.href = "home.page#market-id="+$(this).data('id');
    						}
    						
    		            	return false;
    		            });
    				}else{
    					alert(data.data);
    				}
    			}
    		});
    	}       
        
		function moveSideBar(window){
	    	var jBroadside = $("#broadside");           
	        var footerTop = $("footer").offset().top;          
	        var sideBottom = jBroadside.offset().top + jBroadside.height();
	        if(window.scrollTop() >= 200){
	        	$("#to-top").css({
	               'visibility':'visible' 
	            });
	            if((footerTop) > sideBottom){
	                jBroadside.css({
	                    'position':'fixed',
	                    'top':'150px',
	                });
	            }else{
	                jBroadside.css({
	                    'position':'fixed',
	                    'top':footerTop - sideBottom + 150 + 'px',
	                });
	            }
	        }else{
	            jBroadside.css({
	                'position':'absolute',
	                'top':'116px'
	            });
	            $("#to-top").css({
	               'visibility':'hidden' 
	            });
	        }
	    }
        
    </script>
</body>
</html>